<template>
  <div class="container">
    <PropTable
      :columns="column"
      :data="list"
      :total="total"
      @reset="reset"
      @onSubmit="onSubmit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @exportExcelAction="exportExcelAction"
      permissionPrefix="system:management"
    >
      <template v-slot:contractStatus="scope">
        {{ disposeContractStatus(scope.row?.contractStatus) }}
      </template>
      <template #btn>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="handleAdd"
            ><el-icon><plus /></el-icon> 新建回款计划</el-button
          >
        </div>
      </template>

      <template v-slot:operation="scope">
        <div style="display: flex; justify-content: center">
          <el-button
            type="text"
            icon="Edit"
            @click="approval(scope.row)"
            v-if="scope.row.contractStatus === '1'"
          >
            回款进度
          </el-button>
          <el-button
            type="text"
            icon="Delete"
            @click="delApprovalList(scope.row)"
            v-if="scope.row.contractStatus === '0'"
            >详情
          </el-button>
        </div>
      </template>
    </PropTable>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import PropTable from "@/components/Table/PropTable/index.vue";
import { paymentListApi } from "@/api/payment/payment";
import { useEmpty, formatDate } from "@/utils/index";
const { proxy } = getCurrentInstance();
const router = useRouter();
// 合同状态
const contract = [
  {
    value: "0",
    label: "已结清",
  },
  {
    value: "1",
    label: "未结清",
  },
];
const column = [
  {
    name: "affiliatedProject",
    label: "项目名称",
    inSearch: true,
    valueType: "input",
  },
  {
    name: "ownersUnit",
    label: "企业名称",
    inSearch: true,
    valueType: "input",
  },
  {
    name: "projectContact",
    label: "项目联系人",
  },
  {
    name: "projectContactNumber",
    label: "项目联系电话",
  },
  {
    name: "contractStatus",
    label: "合同状态",
    inSearch: true,
    valueType: "select",
    options: contract,
    slot: true,
  },
  {
    name: "contractAmount",
    label: "合同金额",
  },
  { name: "processed", label: "已回款" },
  { name: "pending", label: "待回款" },
  {
    name: "contractDate",
    label: "签约日期",
    inSearch: true,
    valueType: "daterange",
  },
  {
    name: "entTime",
    label: "结束日期",
  },
  { name: "collectionManager", label: "回款负责人" },
  { name: "operation", slot: true, width: 200, fixed: "right", label: "操作" },
];

// 处理合同状态
const disposeContractStatus = (value) => {
  let transtionContract = contract.find((item) => item.value === value);
  return transtionContract ? transtionContract.label : "";
};
const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
let paramsSubmit;
const getPaymentList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  if (paramsSubmit) {
    for (let key in paramsSubmit) {
      if (paramsSubmit[key]) {
        if (Array.isArray(paramsSubmit[key]) === true) {
          const contractDate = paramsSubmit[key][0];
          const entTime = paramsSubmit[key][1];
          params = {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            contractDate,
            entTime,
          };
        } else {
          params[key] = paramsSubmit[key];
        }
      }
    }
  }
  const res = await paymentListApi(params);
  console.log(res);
  if (res.code === 200 && res.rows.length >= 0) {
    list.value = res.rows;
    total.value = res.total;
  }
};
// 重置
const reset = (val) => {
  val = "";
  getPaymentList();
};
// 查询
const onSubmit = (val) => {
  val.projectCreateTime = formatDate(val.projectCreateTime);
  paramsSubmit = val;
  getPaymentList();
};
// 切换每页条数
const handleSizeChange = (valueSise) => {
  pageSize.value = valueSise;
  getPaymentList();
};
// 切换页码
const handleCurrentChange = (valuePage) => {
  pageNum.value = valuePage;
  getPaymentList();
};
// 导出
const exportExcelAction = (val) => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  if (val) {
    for (let key in val) {
      if (val[key]) {
        params[key] = val[key];
      }
    }
  }
  proxy.download(
    "/system/management/export",
    params,
    `回款管理_${
      new Date().getFullYear() +
      "-" +
      new Date().getMonth() +
      1 +
      "-" +
      new Date().getDate()
    }.xlsx`
  );
};
// 新建回款
const handleAdd = () => {
  router.push({
    path: "/returned/returned-add/add",
    query: { name: 1 },
  });
};
// 回款进度
const approval = (row) => {
  // console.log(row);
  router.push({
    path: "/returned/returned-add/add",
    query: { id: row.refundId, name: 2 },
  });
};
// 回款详情
const delApprovalList = (row) => {
  router.push({
    path: "/returned/returned-add/add",
    query: { id: row.refundId, name: 3 },
  });
};
onMounted(async () => {
  await getPaymentList();
});
</script>
<style lang="scss" scoped></style>
